<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>配置钉钉应用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .mark {
            display: inline-block;
            width: 7px;
            height: 16px;
            border-radius: 3px;
            background-color: #0064FF;
            margin-right: 10px;
        }

        .flex {
            display: flex;
        }

        .align-center {
            align-items: center;
        }

        .el-input.is-disabled .el-input__inner {
            background-color: #F5F7FA;
            border-color: #E4E7ED;
            color: #606266;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">钉钉应用配置</div>
            </div>
            <el-collapse style="margin-bottom: 100px;">
                <el-collapse-item>
                    <template slot="title">
                        <div class="flex align-center">
                            <i class="mark"></i>
                            <span style="font-size: 14px; font-weight: 600;">基础信息</span>
                        </div>
                    </template>
                    <el-form-item style="margin-bottom: 10px;" label="修改基本信息">
                        <el-switch @change="changeIsEdit($event,'contract')" v-model="isEdit"
                            active-color="#13ce66"></el-switch>
                    </el-form-item>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="应用凭证">
                            <el-form-item prop="App_ID">
                                <el-input :disabled="!isEdit" v-model.trim="form.App_ID"
                                    placeholder="请输入应用凭证App_ID"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="应用名称">
                            <el-form-item prop="Application_Name">
                                <el-input :disabled="!isEdit" v-model.trim="form.Application_Name"
                                    placeholder="请输入应用名称"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="Client_ID">
                            <el-form-item prop="Client_ID">
                                <el-input :disabled="!isEdit" v-model.trim="form.Client_ID"
                                    placeholder="请输入Client_ID"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="密钥">
                            <el-form-item prop="Client_Secret">
                                <el-input :disabled="!isEdit" v-model.trim="form.Client_Secret"
                                    placeholder="请输入Client_Secret"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title">
                        <div class="flex align-center">
                            <i class="mark"></i>
                            <span style="font-size: 14px; font-weight: 600;">机器人</span>
                            <span style="font-size: 12px;" :style="{color:form.Robot_Code?'#67C23A':'#F56C6C'}">
                                {{form.Robot_Code?'（已配置code:'+form.Robot_Code+')':'（未配置）'}}
                            </span>
                        </div>
                    </template>
                    <el-button type="primary" size="small" style="margin-bottom: 5px;" @click="submitForm">保存</el-button>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="信息推送配置">
                            <el-form-item prop="Robot_Code">
                                <el-input v-model.trim="form.Robot_Code" placeholder="请输入机器人编号"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title">
                        <div class="flex align-center">
                            <i class="mark"></i>
                            <span style="font-size: 14px; font-weight: 600;">消息推送配置</span>
                            <span style="font-size: 12px;" :style="{color:message_total>0?'#67C23A':'#F56C6C'}">
                                {{message_total>0?'（已配置:'+message_total+'条)':'（未配置消息推送）'}}
                            </span>
                        </div>
                    </template>
                    <div style="display: flex; margin-bottom: 10px;">
                        <el-button type="primary" size="small" style="margin-right: 10px;"
                            @click="MessageAdd">添加</el-button>
                        <el-input placeholder="筛选消息推送名称" clearable @change="MessageSerach"
                            v-model.trim="message_form.User_Name"></el-input>
                    </div>
                    <el-table :data="message_tableData" stripe border style="width: 100%" height="450px">
                        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
                        <el-table-column align="center" prop="Dingtalk_Message_SerialNumber" width="180"
                            label="消息推送流水号"></el-table-column>
                        <el-table-column align="center" prop="Dingtalk_Message_Name" width="180"
                            label="消息推送名称"></el-table-column>
                        <el-table-column prop="User_Name" label="推送人员">
                            <template v-slot="{row}">
                                <el-tag v-for="(item,index) in row.User_Name.split('_')" :key="index">{{item}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="预览" width="220">
                            <template v-slot="{row}">
                                <component :is="row.Msg_Key" :data="row.Msg_Param" preview></component>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="180">
                            <template v-slot="{row}">
                                <el-button type="success" size="small"
                                    @click="Send(row.Dingtalk_Message_SerialNumber)">发送</el-button>
                                <el-dropdown size="small" trigger="click">
                                    <el-button size="small" type="primary">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item style="margin-bottom: 5px;">
                                            <el-button type="primary" size="small"
                                                @click="MessageEdit(row.Dingtalk_Message_SerialNumber)">编辑</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item style="margin-bottom: 5px;">
                                            <el-button type="danger" size="small"
                                                @click="MessageDelete(row.Dingtalk_Message_SerialNumber)">删除</el-button>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 5px;" background @size-change="handleMessageSizeChange"
                        @current-change="handleMessageCurrentChange" :current-page="message_form.page"
                        :page-sizes="[10, 20, 30, 50]" :page-size="message_form.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="message_total">
                    </el-pagination>
                </el-collapse-item>
            </el-collapse>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">保存</el-button>
            </el-form-item>

        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="js/Components.js"></script>
    <script type="text/javascript" src="js/Edit.js"></script>
</body>

</html>